import React, { useState } from "react";
import styles from './Form.module.scss'

export default function LoginForm() {
    const [fisrtName, setFirstName] = useState<string>('')
    const [lastName, setLastName] = useState<string>('')

    const fullName = fisrtName + lastName

    function handleFirstName(e: React.ChangeEvent<HTMLInputElement>) {
        e.preventDefault()
        setFirstName(e.target.value)
    }

    function handleLastName(e: React.ChangeEvent<HTMLInputElement>) {
        e.preventDefault()
        setLastName(e.target.value)
    }

    return (
        <div className={styles.LoginFormDiv}>
            <h2>让我们帮你登记</h2>
            <label>名: {' '}<input type="text" value={fisrtName} onChange={handleFirstName} /></label>
            <label>姓: {' '}<input type="text" value={lastName} onChange={handleLastName} /></label>
            <p>你的票据将要发给: <b>{fullName}</b></p>
        </div>
    )
}

//在组件间共享状态 
export function Accordion() {
    const [activeIndex, setActiveIndex] = useState(0)
    return (
        <>
            <Panel title="关于" isActive={activeIndex === 0} onShow={() => setActiveIndex(0)} >
                阿拉木图人口约200万，是哈萨克斯坦最大的城市。在1929年至1997年之间，它是该国首都。
            </Panel>
            <Panel title="词源" isActive={activeIndex === 1} onShow={() => setActiveIndex(1)} >
                这个名字源于哈萨克语 <span lang="kk-KZ">алма</span>，是“苹果”的意思，通常被翻译成“满是苹果”。事实上，阿拉木图周围的地区被认为是苹果的祖籍，<i lang="la">Malus sieversii</i> 被认为是目前本土苹果的祖先。
            </Panel>
        </>
    )
}

function Panel({ title, isActive, children, onShow }: PanelProps) {
    return (
        <section>
            <h3>{title}</h3>
            {isActive ? <p>{children}</p> : (<button onClick={onShow}>显示</button>)}
        </section>
    )
}

interface PanelProps {
    title: string
    isActive: boolean
    children: React.ReactNode
    onShow: () => void
}